<template>
  <div class="realtime-activity">
    <div class="activity-log">
      <div v-for="activity in activities" :key="activity.id" class="activity-item">
        <div class="activity-time">{{ activity.time }}</div>
        <div class="activity-message">{{ activity.message }}</div>
      </div>
      <div v-if="activities.length === 0" class="no-activity">
        暂无实时活动
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Activity {
  id: number | string
  time: string
  message: string
}

interface Props {
  activities: Activity[]
}

withDefaults(defineProps<Props>(), {
  activities: () => []
})
</script>

<style scoped lang="scss">
.realtime-activity {
  .activity-log {
    max-height: 300px;
    overflow-y: auto;
    
    .activity-item {
      padding: 8px 0;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .activity-time {
        font-size: 12px;
        color: #909399;
      }
      
      .activity-message {
        font-size: 13px;
        color: #606266;
        margin-top: 2px;
      }
    }
    
    .no-activity {
      text-align: center;
      color: #909399;
      font-size: 14px;
      padding: 20px 0;
    }
  }
}
</style>